<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .static{
            width:150px;
            height:150px;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: firebrick;
        }
        .b{
            border:20px solid blueviolet;
            
        }
        .c{
            border-radius: 50%;
        }
        .mains{

        }
        .navs{
            width:440px;
            display: flex;
            justify-content: space-between;
        }
        .nav{
            width:100px;
            height:38px;
            border-radius: 10px;
            text-align: center;
            line-height: 38px;
            background: pink;
            color:#fff;
            cursor: pointer;
        }
        .nav.active{
            background: deeppink;
            color:aquamarine;
        }
        .content{

        }
        .citem{
            width:440px;
            height:440px;
            border-radius: 20px;
            color:#f50;
            font-size: 60px;
            background: darkorchid;
            text-align: center;
            line-height: 440px;
            margin-top:20px;
        }
        table td{
            border:1px solid #000;
            padding:3px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选中</td>
                    <td>名称</td>
                    <td>描述</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(l,i) in goods" :key="i">
                    <td>{{i+1}}</td>
                    <td> <input type="checkbox" v-model="l.check"></td>
                    <td> {{l.title}}</td>
                    <td> <img :src="imgSrc"  width="100" height="50"  alt=""></td>
                    <td> {{l.price }}</td>
                    <td> <input type="number" v-model.number ="l.count" > </td>
                    <td> {{l.price * l.count}}</td>
                    <td><button @click="goods.splice(i,1)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div>
            <p>
                <label for="check">全选反选</label>
                <input type="checkbox"  id="check" v-model="quan" >
            </p>
            <p>
                <button @click="Deletecheck">删除选中</button>
            </p>
            <p>
                选中数量: {{checkTotal}} - {{checkItotal}} /  总数量 : {{total}} - {{itotal}}
            </p>
            <p>
                选中价值:{{checkAmount}}  - {{checkIAmount}} /  总价值: {{amount}} - {{iamount}}
            </p>
        </div>
    </div>

    <script>
        const vm = new Vue({
            data:{
                title:"v-model 实现简易的购物车  ",
                goods:[
                    {check:false,title:"上衣",price:200,count:10},
                    {check:true,title:"裤子",price:100,count:10},
                    {check:false,title:"鞋子",price:500,count:10},
                    {check:false,title:"风衣",price:1000,count:10},
                    {check:true,title:"帽子",price:300,count:10},
                    {check:true,title:"西服",price:2000,count:10},
                ],
                imgSrc:'http://47.104.209.44/base/imgs/1.jpg',
                total:0,
                checkTotal:0,
                amount:0,
                checkAmount:0
            },
            watch:{
                // goods(v){
                //     console.log(v)
                // }
                // 深度监听
                goods:{
                    deep:true, // 深度监听
                    handler(v){
                        console.log(v)
                        this.total = 0
                        this.amount = 0
                        this.checkAmount = 0
                        this.checkTotal = 0;
                        v.forEach(item=>{
                            this.total+= item.count;
                            this.amount += item.count * item.price 
                            if(item.check){
                                this.checkTotal += item.count;
                                this.checkAmount += item.count * item.price 
                            }
                        })
                    }
                }
            },
            computed:{
                itotal(){
                    var total = 0
                    this.goods.forEach(item=>{
                        total+=item.count 
                    })
                    return total 
                },
                checkItotal(){
                    var total = 0
                    this.goods.forEach(item=>{
                        if(item.check) {
                            total+=item.count 
                        }
                    })
                    return total 
                },
                iamount(){
                    var total = 0
                    this.goods.forEach(item=>{
                        total+=item.count * item.price 
                    })
                    return total  
                },
                checkIAmount(){
                    var total = 0
                    this.goods.forEach(item=>{
                        if(item.check) {
                            total+=item.count  * item.price 
                        }
                    })
                    return total 
                },
                quan:{
                    get(){
                        // return this.goods.filter(item=>item.check).length==this.goods.length ; 
                        // var flag = true;
                        // this.goods.forEach(item=>{
                        //     if(!item.check){
                        //         flag = false;
                        //     }
                        // })
                        // return flag 
                        // some every 
                        return this.goods.length?this.goods.every(item=>item.check):false;
                    },
                    set(v){
                        console.log(v)
                        // this.goods = this.goods.map(item=>item.check=v);
                        this.goods = this.goods.map(item=>{
                            item.check = v;
                            return item 
                        })
                    }
                }
            },
            methods:{
                Deletecheck(){
                    this.goods = this.goods.filter(item=>!item.check)  
                    // check true 删除
                    // check false 保留  
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
                this.goods.forEach((item)=>{
                    this.total+= item.count;
                    this.amount += item.count * item.price 

                    if(item.check){
                        this.checkTotal += item.count;
                        this.checkAmount += item.count * item.price 
                    }
                })
            }
        }).$mount("#app")


       
    </script>

</body>
</html>